!(function () {
  const GameBox = document.createElement("div");
  document.body.appendChild(GameBox);
  GameBox.style.display = "flex";
  GameBox.style.flexDirection = "column";
  GameBox.style.alignItems = "center";
  GameBox.style.justifyContent = "center";
  GameBox.style.minHeight = "100vh";

  const Tips = document.createElement("p");
  Tips.innerHTML = `
    请输入迷宫大小，再使用键盘的方向键进行操作。
    两种生成方式不同，暂不支持手机游玩。
    `;
  Tips.style.marginBottom = "20px";
  GameBox.appendChild(Tips);

  const startBox = document.createElement("div");
  GameBox.appendChild(startBox);
  startBox.style.marginBottom = "20px";
  const mazeSizeInput = document.createElement("input");
  mazeSizeInput.id = "mazeSize";
  mazeSizeInput.type = "number";
  mazeSizeInput.placeholder = "请输入迷宫尺寸";
  startBox.appendChild(mazeSizeInput);

  const startBtn = document.createElement("Button");
  startBtn.innerHTML = "开始生成迷宫-1";
  startBtn.addEventListener("click", () => {
    createGame(1);
  });
  startBox.appendChild(startBtn);

  const startBtn2 = document.createElement("Button");
  startBtn2.innerHTML = "开始生成迷宫-2";
  startBtn2.addEventListener("click", () => {
    createGame(2);
  });
  startBox.appendChild(startBtn2);

  function createGame(modeType) {
    // 清理原来的场景
    const maze = document.querySelector("#maze");
    if (!!maze) {
      GameBox.removeChild(maze);
    }

    let mazeSize = Number(mazeSizeInput.value);
    if (!mazeSize || mazeSize < 5) {
      console.log("必须填写尺寸，且必须大于5");
      return;
    }
    if (mazeSize >= 110) {
      console.log("尺寸太大了，支持最大110");
      return;
    }
    // 迷宫尺寸,尺寸为偶数的话，加1转为奇数
    if (mazeSize % 2 === 0) {
      mazeSize = mazeSize + 1;
    }
    startCreateMaze(mazeSize, modeType).then((app) => {
      GameStage = app;
    });
  }

  // 缓动循环
  const MainLoop = () => {
    requestAnimationFrame(MainLoop);
    TWEEN.update();
  };
  MainLoop();

  // 游戏构建开始
  const { Application, Texture } = PIXI;

  // 元素块尺寸
  const cellSize = 20;

  const startCreateMaze = async (mapSize, modeType) => {
    // 渲染舞台
    const app = new Application({
        width: mapSize * cellSize,
        height: mapSize * cellSize,
      }),
      { stage, view } = app;
    view.id = "maze";

    const { mapContainer, checkCellIsWay, startWall, endWall } = await MazeMap(
      mapSize,
      cellSize,
      app,
      stage,
      modeType
    );

    GameBox.appendChild(view);

    let imgs = [];
    for (let i = 1; i <= 16; i++) {
      const texture = Texture.from(
        `http://other.lookthis.cc/gost_${i < 10 ? "0" + i : i}.png`
      );
      imgs.push(texture);
    }

    const { player, onPlayeMove } = PlayerAni(imgs, cellSize);

    const { x, y } = startWall.pos;
    player.x = x * cellSize;
    player.y = y * cellSize;
    player.pos = { x, y };
    mapContainer.addChild(player);

    const checkSuccess = () => {
      const { x: ex, y: ey } = endWall.pos;
      const { x: px, y: py } = player.pos;
      if (ex === px && ey === py) {
        return true;
      } else {
        return false;
      }
    };

    function onKeyDown(e) {
      let { x: px, y: py } = player.pos;
      offGameEvent();
      switch (e.key) {
        case "ArrowDown":
          py += 1;
          break;
        case "ArrowLeft":
          px -= 1;
          break;
        case "ArrowRight":
          px += 1;
          break;
        case "ArrowUp":
          py -= 1;
          break;
      }
      if (!checkCellIsWay(px, py)) {
        console.log("撞墙了");
        onGameEvent();
        return;
      }

      onPlayeMove(e).then(() => {
        if (!checkSuccess()) {
          onGameEvent();
        } else {
          alert("恭喜你走出迷宫");
        }
      });
    }
    const onGameEvent = () => {
      document.onkeydown = onKeyDown;
    };

    const offGameEvent = () => {
      document.onkeydown = null;
    };
    onGameEvent();
  };
})();
